<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>script操作dom对象</title>
		<script type="text/javascript">
			//在JavaScript中使用function关键字定义个函数（方法）
			/*
			 * js中的函数不会主动运行，需要和一些控件的事件动作进行绑定，通过事件的触发来
			 */
			//		checkMe=function(){}
			//      var checkMe=function(){}

			function checkMe() {
				console.info("hellowworld");
				document.getElementById('txtName').value = "小李";
				//			alert(document.getElementById('txtName').value);
				var strName = document.getElementById('txtName').value = "小李";
				console.info(strName + "是数字么？" + isNaN(strName))

//				var str = "Free Web Tutorials!"
//				document.write("\n"+str.link("http://www.w3school.com.cn"))
				
			}
			/**
			 * 显示当前时间
			 */
			function showTime(){
				//创建一个事件对象，获取当前时间
				var date=new Date();
				console.info(date.toLocaleTimeString());
				//将当前时间内容写到指定的html控件中
				document.getElementById('spanTime').innerHTML=date.toLocaleTimeString().fontcolor("Red");
				//计时触发函数（指定多长时间执行一次指定的代码）
			    //每隔950毫秒调用一次showTime函数
				setTimeout('showTime()',950);
			}
			/*
 * js构建对象
 */
function doTest() {
	// 1、直接创建对象的方式
			//js中定义对象
			//定义一个学生类
			var stu=new Object();
			//设定对象的属性
			stu.stuName='小李'
			stu.stuAge=20;
			stu.stuSex='男';
			//定义对象的行为
			stu.doStuding=function(){
				console.info("stu：name-"+stu.stuName);
				
			
			}
			//调用student类的行为方法
				stu.doStuding();
			}
		</script>
	</head>

	<!--<body onload="showTime()">-->
		<body>
		<!--form表单：客户端浏览器用来向服务器端进行信息提交的标签
			写在form表单的标签的值才会被提交给服务器
			action--指定的是服务器端的哪个程序（类-方法）进行响应
			method--使用哪种方式进行数据从客户端发送到服务器。
			  选项：get -- 将客户端信息附加在访问连接url的尾端进行发送信息；
			            缺点：需要附加在url之后，可能会以明文的形式显示，信息不安全；
			            长度会受到限制（不能大于255个字符）
			           汉字容易乱码（字节流方式传输）
			      post-- 将客户端数据信息以数据包的形式发送到服务器端；
			           不存在上述问题。
		-->
		<div align="center">
			<form action="#" method="get">
				<table border="1" cellpadding="0" cellspacing="0" bordercolor="red" style="width: 80%; align-self: center;">
					<tbody>
						<tr>
							<td>姓名</td>
							<td><input type="text" id="txtName" name="txtName" value="admin" /></td>
						</tr>
						<tr>
							<td>登录密码</td>
							<td><input readonly="readonly" type="password" name="txtPaw" id="txtPaw" /></td>
						</tr>
						<tr>
							<td>性别</td>
							<!--radio类型的输入框，需要name属性值一样，才具有互斥选择性-->
							<td><input type="radio" id="radSex" name="radSex" checked="checked" />女
								<input type="radio" id="radSex2" name="radSex" />男
								<input type="radio" id="radSex3" name="radSex" />未知</td>
						</tr>
						<tr>
							<td>个人简历</td>
							<td><input type="file" name="fileResume" id="fileResume" /></td>
						</tr>
						<tr>
							<td>兴趣爱好</td>
							<!--checkbox多选框；需要name属性保持一致；服务器是使用数组对一组checkbox控件的值进行接收的-->
							<td><input type="checkbox" name="chHobby1" id="chHobby" checked />游泳
								<input type="checkbox" name="chHobby2" id="chHobby" />爬山
								<input type="checkbox" name="chHobby3" id="chHobby" />dota
								<input type="checkbox" name="chHobby4" id="chHobby" />coding
								<input type="checkbox" name="chHobby5" id="chHobby" />testing</td>
						</tr>
						<tr>
							<td>隐藏控件</td>
							<td><input type="hidden" name="txthidden" id="txthidden" value="520" /></td>
						</tr>
						<tr>
							<td>学历</td>
							<td><select id="selectXL" name="selectXL" style="width: 120px;">
						<option value=""></option>
						<option value="BK" selected="selected">本科</option>
						<option value="DZ">大专</option>
						<option value="SS">硕士</option>
						<option value="BS">博士</option>
					</select></td>
						</tr>
						<tr>
							<td>自我介绍</td>
							<td><textarea id="txtIntroduce" name="txtIntroduce" style="width: 200px; height: 60px;"></textarea></td>
						</tr>
						<tr>
							<td><input type="submit" id="btnSubmit" value="提交" onclick="return checkMe();" /></td>
							<td><input type="reset" id="btnSubmit" value="重置" /></td>
						</tr>
						<tr>
							<td>当前时间</td>
							<td id="spanTime"></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
						</tr>
					</tbody>
				</table>

			</form>
		</div>
	</body>

</html>